<template>
  <view style="width: 100vw;height: 100vh;background: #F7FAFE">
    <H5Navbar mode="back" title="跟进详情"></H5Navbar>
    <view style="padding: 80rpx 20rpx 0 20rpx;width: 100%;height: 100%;box-sizing: border-box">
      <template v-if="customerList.length">
        <view class="main-block" v-for="item in customerList" :key="item.id">
          <view>
            客户状态：{{item.customerStatus}}
          </view>
          <view style="font-size: 28rpx">
            <view class="flex-row status-black">
              <view style="color: #000;font-weight:700">跟进时间：</view>
              <view style="color: #979797">{{item.followDate}}</view>
            </view>
            <view class="flex-row status-black">
              <view style="color: #000;font-weight:700">跟进任务创建时间：</view>
              <view style="color: #979797">{{item.createTime}}</view>
            </view>
            <view class="flex-row status-black">
              <view style="color: #000;font-weight:700">跟进事项：</view>
              <view style="color: #979797">{{item.followInfo}}</view>
            </view>
<!--            <view class="flex-row status-black" style="justify-content: flex-end">-->
<!--              <button type="primary" size="default" class="btn-handle" @click="followUp(item)">跟进</button>-->
<!--              <button type="primary" size="default" class="btn-handle" @click="toCreateCustomer(2,item)">详情</button>-->
<!--              <button type="primary" size="default" class="btn-handle" @click="toCreateCustomer(1,item)"-->
<!--                      :disabled="item.status != '草稿'">编辑</button>-->
<!--              <button type="warn" size="default" class="btn-handle" @click="delCustomerPeople(item)"-->
<!--                      :disabled="item.status != '草稿'">删除</button>-->
<!--            </view>-->
          </view>
        </view >
      </template>
      <view style="height: 120rpx;" v-if="customerList.length"></view>

      <u-empty
          mode="data"
          v-if="!customerList.length"
          icon="http://cdn.uviewui.com/uview/empty/data.png"
      ></u-empty>
    </view>


    <view style="position: fixed;bottom: 0;height: 120rpx;width: 100%;padding: 0 20rpx;box-sizing: border-box;background: #fff" v-if="showAdd">
      <button type="primary" style="height: 80rpx;line-height: 80rpx" @click="toFollowPage(0)">新建跟进计划</button>
    </view>

  </view>
</template>

<script>
import H5Navbar from "../../components/H5Navbar/index";
import {followList, myCustomerList} from '../../api/work/userManage'
export default {
  name: "activities",
  components:{
    H5Navbar
  },
  data(){
    return {
      customerId:'',
      paging:{
        currentPage:1,
        pageSize:5,
        total:0
      },
      customerList:[],
      showAdd:true
    }
  },
  onReachBottom() {
    let allTotal = this.paging.currentPage * this.paging.pageSize
    if (allTotal < this.paging.total) {
      //当前条数小于总条数 则增加请求页数
      this.paging.currentPage++;
      this.getTableList() //调用加载数据方法
    } else {
      // console.log('已加载全部数据')
    }
  },
  onPullDownRefresh () {
    this.customerList = []
    this.paging.currentPage = 1
    //调用获取数据方法
    this.getTableList()
    setTimeout(() => {
      //结束下拉刷新
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onLoad(options){
    if(options.customerId){
      this.customerId = options.customerId
    }
    if(options.hasOwnProperty('showAdd')){
      this.showAdd = false
    }
    else{
      this.showAdd = true
    }
    this.getTableList()
  },
  methods:{
    getTableList(){
      const params = {
        current:this.paging.currentPage,
        size:this.paging.pageSize,
        customerId:this.customerId
      }
      followList(params).then(res => {
        if(res.code == 200){
          this.customerList = [...this.customerList,...res.data.records]
          this.paging.total = res.data.total
        }
        else{
          this.customerList = []
          this.paging.total = 0
        }
      })
    },
    toFollowPage(){
      uni.navigateTo({
        url:'/pageA/follow/addFollow?customerId='+this.customerId,
        animationType: 'pop-in',
      })
    }
  }
}
</script>

<style scoped lang="scss">
.main-block{
  width: 100%;
  margin-bottom: 40rpx;
  &>view:first-child{
    padding-left: 10rpx;
    box-sizing: border-box;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background: #2979ff;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    font-size: 28rpx;
    color: #fff;
    font-weight: 700;
  }
  &>view:last-child{
    width: 100%;
    box-sizing: border-box;
    background: #fff;
  }
}

.status-black{
  box-sizing: border-box;
  padding:10rpx;
  height: 70rpx;
  border-bottom: 2rpx solid #EBEFF2;
}

.btn-handle{
  padding: 0 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 24rpx;
  text-align: center;
  border-radius: 10rpx;
  margin:0 0 0 20rpx;
}
</style>
